<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-button type="primary" @click="fetchData()">查询</el-button>
    </el-form>
    <el-card class="box-card" body-style="padding: 10px">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="openAddForm()">新增</el-button>
    </el-card>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
${tableColumnsEntity}
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-finished" size="small" @click="openEditForm(scope.row)">查看</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="delById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="totalCount" :page-size="pageSize" @current-change="handleCurrentChange" />
    <!-- 表单 -->
    <el-dialog title="" :visible.sync="subDialogVisible" width="80%">
      <el-form label-position="left" label-width="80px" :model="editForm">
        
        <el-form-item v-show="false" label="id">
          <el-input v-model="editForm.id" />
        </el-form-item>
${formFieldsEntity}
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveForm">确认</el-button>
        <el-button type="button" @click="subDialogVisible=false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {  } from '@/api/xxx'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      subDialogVisible: false,
      editForm: {
        id: '',
${editFormFieldsEntity}
      },
      searchForm: {},
      totalCount: 0,
      currentPage: 1,
      pageSize: 20
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const formData = new FormData()
      formData.append('page', this.currentPage)
      formData.append('size', this.pageSize)
      /** 结果集为map */
      list(formData).then(response => {
        this.list = response.rows
        this.totalCount = response.total
        this.listLoading = false
      })
    },
    resetForm() {
      this.editForm = {
        id: '',
${editFormFieldsEntity}
      }
    },
    openAddForm() {
      this.resetForm()
      this.subDialogVisible = true
    },
    openEditForm(row) {
      this.resetForm()
      this.editForm.id = row.id
${initEditFormDataEntity}
      this.subDialogVisible = true
    },
    handleCurrentChange(p) {
      this.currentPage = p
      this.fetchData()
    },
    saveForm() {
      const formData = new FormData()
      formData.append('id', this.editForm.id)
${saveFormDataEntity}
      /** 结果为ResultDto */
      save(formData).then(response => {
        // console.log(response)
        this.subDialogVisible = false
        this.fetchData()
      })
    },
    delById(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(response => {
          if (response.code === 'SUCCESS') {
            this.subDialogVisible = false
            this.fetchData()
          } else {
            this.$message({
              type: 'danger',
              message: response.msg
            })
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'danger',
        //   message: '程序异常'
        // })
      })
    }
  }
}
</script>
<style lang="scss">
  .el-dialog-div {
    height: 60vh;
    overflow-x: hidden;
  }
</style>
